<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated Dreams</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<link href="/js/carousel/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/carousel/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/anima/carousel/skins/tango/skin.css" />


<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 4,
		buttonNextHTML: null,
		buttonPrevHTML: null,
		speed: 'false',
		animation: 'fast',
		scrolling: false

    });
});

</script>


<style>
	
a{
text-decoration: none;
}

img{
	border: 0px;
}

#popup{
	width:740px;
	height:450px;
}
.pleft{
	width:600px !important;
	float: left;
}

.pright{
	float:right;
	padding-top: 0px;
	width: 130px;
	height: 420px;
}

.ppic{
	width:590px !important;
	height:405px !important;
}



.pup{
	padding: 0 0 5px 30px;
}

.pdown{
	padding: 0px 0 0 30px;
}

.pprev{
	float:left;
}

.undertxt{
	width:550px;
	float:left;
	padding-left: 10px;
	padding-top: 3px;
	text-align: center;
}

.clear{
	clear: both;
}

.pclose{
	float:right;
}

.info{
	width:100%;
	padding-bottom: 33px;
}

.ptitle{
	float:left;
}

.ppage{
	float:left;
	padding-left: 100px;
}

.active{
	border:4px solid gray;
}

li img{
	border: 4px solid white;
}

.pic_container{
	display:none;
}

</style>


</head>
<body>

<div id="popup">
	<div class="info">
		<div class="pclose"><a href="#"><?php echo  __('sulge')?> (x)</a></div>
		<div class="ptitle"><?php echo  $bg['name'] ?></div>
		<div class="ppage"><span>1</span> | <?php echo count($banners) ?></div>
	</div>
  <div class="pleft">
    <div class="ppic"><a href="#">
			<img style="display: block;margin-left: auto;margin-right: auto" src="<?php echo @myPicture::getInstance($firstBanner['file'])->resize(590,400,true,true)->url()?>"  alt="" /></a>
	</div>
    <div class="pprev"><a href="#"><img src="/anima/images/pprev.png" width="13" height="28" alt="Tagasi" /></a></div>
    <div class="undertxt"><?php echo str_replace('no name', '',$firstBanner['name']) ?></div>
    <div class="pnext"><a href="#"><img src="/anima/images/pnext.png" width="16" height="28" alt="Edasi" /></a></div>
	<div class="clear"></div>
  </div>
	

  <div class="pright">
    <div class="pup"><a href="#"><img src="/anima/images/pup.png" width="53" height="22" alt="Üles" /></a></div>
	  <ul id="mycarousel" class="jcarousel-skin-tango jcarousel">

		<?php foreach($banners as $index => $banner): ?>
			<li>
				<img <?php if($index == 0): ?>class="active"<?php endif; ?>  src="<?php echo @myPicture::getInstance($banner['file'])->thumbnail(117,84,'center')->url()?>" width="117" height="84" alt="<?php echo str_replace('no name', '', $banner['name']) ?>" />
				<div class="pic_container"><?php echo @myPicture::getInstance($banner['file'])->resize(590, 400, true, true)->url()?></div>
			</li>
		<?php endforeach; ?>

		<?php if(count($banners) < 4): ?>
			<?php echo str_repeat('<li></li>', (4-count($banners))) ?>
		<?php endif; ?>
	  </ul>
    <div class="pdown"><a href="#"><img src="/anima/images/pdown.png" width="51" height="23" alt="Alla" /></a></div>
  </div>
</div>
</body>

<script type="text/javascript">

function numberOfFrames(){
	return Math.ceil($('#mycarousel').data('jcarousel').size() / 4);
}

$('.pup').click(function(e){
	e.preventDefault();
	$('#mycarousel').data('jcarousel').prev();
	return false;
});

$('.pdown').click(function(e){
	e.preventDefault();
	$('#mycarousel').data('jcarousel').next();
	return false;
});

$('.pclose').click(function(e){
	e.preventDefault();
	parent.$.fn.colorbox.close();
	return false;
});

$('li').click(function(e){
	e.preventDefault();

	if($(this).find('img').attr('src') == undefined) return false;

	$('li img').removeClass('active');
	$('img',this).addClass('active');

	var index = $('li').index(this) + 1;
	$('.ppage span').text(index);
	
	$('.ppic img').attr('src',$('.pic_container',this).text());
	$('.undertxt').html($('img',this).attr('alt'));
	
	return false;
});

$('.pnext,.pprev,.ppic').click(function(e){
	e.preventDefault();

	var currentListElement = $('li .active').parent('li');

	if($(this).hasClass('pnext') || $(this).hasClass('ppic'))
	{
		if(currentListElement.next()){
			var index = $("li").index(currentListElement.next());
			if(index % 4 == 0){
				$('.pdown').trigger('click');
			}

			currentListElement.next().trigger('click');
		}
	}
	else
	{
		if(currentListElement.prev()){
			var index = $("li").index(currentListElement.prev());
			
			if((index+1) % 4 == 0){
				$('.pup').trigger('click');
			}

			currentListElement.prev().trigger('click');
		}
	}
	
	return false;
});

</script>



</html>
